<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>simple</title>
</head>

<body>
    <div id="area1">
    </div>
    <div class="father">

    </div>
    <!-- beforebegin -->
    <div class="room">
        <!-- afterbegin -->
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
        <!-- beforeend -->
    </div>
    <!-- afterend -->

    <div id="area2"></div>
    <button id="add">添加</button>
    <div class="outer">
        <div class="inner">yyy</div>
    </div>
    <style>
        #area1 {
            background-color: chocolate;
            width: 200px;
            height: 200px;
        }

        #area2 {
            background-color: rgb(142, 60, 1);
            width: 200px;
            height: 200px;
        }
    </style>
    <script>
        //  list ["apple", "orange", "pear"]
        let c = ["apple", "orange", "pear"]
        let area1 = document.querySelector("#area1");
        // area1.innerHTML=`<ul>
        //     <li>${c[0]}</li>
        //     <li>${c[1]}</li>
        //     <li>${c[2]}</li>
        //     </ul>`;
        // <li></li>
        let ul = document.createElement("ul");
        ul.style.listStyle = "none";
        for (let i = 0; i < c.length; i++) {
            let item = document.createElement("li");
            // <li>apple</li>
            item.innerText = c[i];
            ul.appendChild(item);
        }
        console.log(ul);
        area1.appendChild(ul);
        let xxx = document.createTextNode("xxx")
        area1.appendChild(xxx);
        area1.append("yyy");
        //  碎片 fragment 性能好 容器性
        //    <div class="son1">son1</div>
        //    <div class="son2">son2</div>
        let father = document.querySelector(".father");
        let son1 = document.createElement("div");
        son1.classList.add("son1");
        son1.append("son1");
        let son2 = document.createElement("div");
        son2.classList.add("son2");
        son2.innerText = "son2";
        // father.appendChild(son1);
        // father.appendChild(son2);
        // let temp = document.createElement("div");
        // fragment template 

        let temp = document.createDocumentFragment();
        temp.appendChild(son1);
        temp.appendChild(son2);



        father.appendChild(temp);

        // insertBefore
        let son1_5 = document.createElement("div");
        son1_5.innerText = "son1_5";
        // console.log(son1_5)
        father.insertBefore(son1_5, son2);

        // insertAdjacentElement
        let room = document.querySelector(".room")
        let button = document.createElement("button")
        button.innerText = "Enter";
        // room.insertAdjacentElement("beforebegin", button)
        // room.insertAdjacentElement("afterend", button)
        // room.insertAdjacentElement("afterbegin", button);
        room.insertAdjacentElement("beforeend", button);



        // 添加 水果
        let fruits = ["apple", "orange", "pear"]
        let add = document.querySelector("#add");
        let area2 = document.querySelector("#area2");
        add.addEventListener("click", (e) => {
            // console.log(add)
            // 创建一个添加内容
            let button = document.createElement("button")
            // [0,3)
            let i = Math.floor(Math.random() * fruits.length)
            button.innerText = fruits[i];
            // console.log(button, area2)
            // 添加到目标地方
            // area2.appendChild(button);
            area2.insertAdjacentElement("beforeend", button)

        })


        /* 
           <div class="outer">
        <div class="inner">yyy</div>
            </div>
            */
// removeChild
        let outer = document.querySelector(".outer");
        let inner = document.querySelector(".inner");
        let innerex = document.createElement("div");
        innerex.innerHTML = "zzz";
        innerex.classList.add("innerex");

        outer.replaceChild(innerex, inner);
        // outer.parentNode.removeChild(outer);
       
        // if(outer.parentNode){
        //     outer.parentNode.removeChild(outer)
        // }
        // outer.parentNode && outer.parentNode.removeChild(outer)
        outer.remove();


        // 兄弟节点
       let child2 = document.querySelector(".child2");
    </script>
</body>

</html>